<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Item tracker</title>
  </head>
  <body>
    <div class="container mt-4">
      <div class="row"></div>
      <div class="col"></div>
      <div class="col">
          <h1>{{table}}</h1>
          <form>
            <div class="btn-group" role="group" aria-label="Status filter radio buttons">
              <input type="radio" class="btn-check" name="status_filter" id="status_all" autocomplete="off" value="All"
                {% if status_filter == 'All' %}checked{% endif %}>
              <label class="btn btn-outline-primary" for="status_all">All</label>

              <input type="radio" class="btn-check" name="status_filter" id="status_open" value="Open" autocomplete="off"
                {% if status_filter == 'Open' %}checked{% endif %}>
              <label class="btn btn-outline-primary" for="status_open">Open</label>

              <input type="radio" class="btn-check" name="status_filter" id="status_archived" value="Archived" autocomplete="off"
                {% if status_filter == 'Archived' %}checked{% endif %}>
              <label class="btn btn-outline-primary" for="status_archived">Archived</label>

              <input type="radio" class="btn-check" name="status_filter" id="status_closed" value="Closed" autocomplete="off"
                {% if status_filter == 'Closed' %}checked{% endif %}>
              <label class="btn btn-outline-primary" for="status_closed">Closed</label>
            </div>
            <button type="submit" class="btn btn-primary">Filter</button>
          </form>
        </div>
        {% with messages = get_flashed_messages() %}
          {% if messages|length == 1 %}
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
              {{messages[0]}}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          {% elif messages %}
            <div class="alert alert-danger mt-3" role="alert">
              {% for message in messages %}
                <p>{{ message }}</p>
              {% endfor %}
            </div>
          {% endif %}
        {% endwith %}
        {% if items %}
        <table class="table table-hover">
          <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Created</th>
            <th scope="col">Description</th>
            <th scope="col">Status</th>
            <th scope="col">Actions</th>
          </tr>
          </thead>
          <tbody>
          {% for item in items %}
          <tr>
            <td>{{item.name}}</td>
            <td>{{item.formatted_date}}</td>
            <td>{{item.description}}</td>
            <td>{{item.status}}</td>
            <td>
              <a class="btn btn-primary" href="/item/{{item.item_id}}">Edit</a>
              <a class="btn btn-primary" href="/items/delete/{{item.item_id}}">Delete</a>
            </td>
          </tr>
          {% endfor %}
          </tbody>
        </table>
        {% else %}
        {% if error %}
        <div class="alert alert-danger mt-3" role="alert">
          <p>Couldn't get items from table '{{table}}' with status '{{status_filter}}'!</p>
          <hr>
          <p class="mb-0">{{error}}</p>
        </div>
        {% else %}
        <div class="alert alert-warning mt-3" role="alert">
          No items found in table '{{table}}' with status '{{status_filter}}'.
          Do you need to add some?
        </div>
        {% endif %}
        {% endif %}
        <a class="btn btn-primary" href="/item">Add item</a>
        <a class="btn btn-primary" href="/report/{{status_filter}}">Report</a>
      </div>
      <div class="col"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>
